<template>
  <div>
    <!--查询条件-->
    <CourseResourcesQuery
      :query="query"
      :loadTableList="loadTableList"
      :clearQuery="clearQuery"
      :removeQueryField="removeQueryField"
    />
    <!--    上传资源-->
    <CourseResourcesUploadFiles
      ref="uploadFilesDialog"
      @loadTableList="loadTableList"
    />
    <!--表格-->
    <CourseResourcesTable
      :table="table"
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      @addRow="addRow"
      @editRow="editRow"
      @controlAddCourseDialogForm="controlAddCourseDialogForm"
    />
    <!--年级添加或编辑对话框组件-->
    <CourseResoucesAddOrEditDialog
      ref="dialogRef"
      :action="action"
    />
  </div>
</template>

<script lang="ts" setup>
import useTableList from '@/api/common/useTableList';
import { getCurrentInstance, provide, ref } from 'vue';
import Request from '@/api/request/request';
import { CourseResources } from '@/types/interface/course_interface';
import CourseResourcesTable from '@/views/page/tearchertack/mycourse/details/resources/CourseResourcesTable.vue';
import CourseResourcesQuery from '@/views/page/tearchertack/mycourse/details/resources/CourseResourcesQuery.vue';
import CourseResourcesUploadFiles from '@/views/page/tearchertack/mycourse/details/resources/CourseResourcesUploadFiles.vue';
import CourseResoucesAddOrEditDialog
  from '@/views/page/tearchertack/mycourse/details/resources/CourseResoucesAddOrEditDialog.vue';
import { useRoute } from 'vue-router';

const { proxy } = getCurrentInstance();
const route = useRoute();
// 课程id
const courseId = sessionStorage.getItem('courseId');
// 表格工具必备参数
const {
  table, query, loadTableList, removeQueryField, clearQuery, changePageSize, changePage,
} = useTableList(`${proxy.$urls.API_URL_BACKSTAGE_SCHOOLCOURSERESOURCE_MANAGE}?courseId=${courseId}`);
// 将表格刷新函数传到子容器
provide('loadTableList', loadTableList);

//  添加编辑的表单对啊画框对象
const dialogRef = ref();
// 表单对象，决定添加编辑表单的action。
const action = ref('post');
const addRow = () => {
  const form = {
    sort: 100,
  };
  action.value = 'post';
  // 添加年级对话框
  dialogRef.value.openDialog(form);
};

// 编辑单行记录。
const editRow = async (row:CourseResources) => {
  action.value = 'put';
  // 读取要编辑的信息，如果不考虑实时性可以直接将row对象传入编辑表单
  const resData:any = await new Request(`${proxy.$urls.API_URL_BACKSTAGE_SCHOOLCOURSERESOURCE_MANAGE}/${row.id}`).get();
  if (resData.success) {
    const form = resData.data;
    dialogRef.value!.openDialog(JSON.parse(JSON.stringify(form)));
  }
};

// 上传资源
const uploadFilesDialog = ref();
const controlAddCourseDialogForm = () => {
  uploadFilesDialog.value.controlAddCourseDialogForm();
};

</script>

<style scoped>

</style>
